<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
	function validateForm() {
		var username = document.forms["regForm"]["username"].value;
		var password = document.forms["regForm"]["password"].value;
		var firstname = document.forms["regForm"]["firstname"].value;
		var lastname = document.forms["regForm"]["lastname"].value;
		var email = document.forms["regForm"]["email"].value;
		var birthdate = document.forms["regForm"]["birthdate"].value;
		var x=document.forms["regForm"]["email"].value;
		var atpos=x.indexOf("@");
		var dotpos=x.lastIndexOf(".");

		var nullFields = username == null || password == null
				|| firstname == null || lastname == null || email == null
				|| birthdate == null;
		var emptyFields = username == "" || password == "" || firstname == ""
				|| lastname == "" || email == "" || birthdate == "";
		var invalidMail = atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length;
		
		if (nullFields || emptyFields) {
			alert("All forms must be filled out");
			return false;
		} else {
			if (invalidMail) {
			  alert("Not a valid e-mail address");
			  return false;
			  }
		}
	}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
@import url(css/main.css);
</style>

<link href="css/smoothness/jquery-ui-1.10.0.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.js"></script>

<script type="text/javascript">
$(function() {
    $( "#datepicker" ).datepicker({
    	inline: true,
    	dateFormat: "dd-mm-yy",
    	changeMonth: true,
    	changeYear: true
    });
});
</script>

</head>
<body>

	<div id="allContainer">
		<h1 id="pageTitle">Registration</h1>

		<div id="singleContainer">

			<%
				if (request.getAttribute("registrationFailed") != null) {
			%>
			<h1 id="failed">Username or email already exists!</h1>
			<%
				}
			%>
			<form name="regForm" action="RegistrationServlet"
				onsubmit="return validateForm();" method="POST">

				<label id="loginLabel">Your username: </label><input type="text"
					id="textInput" name="username" /><br> <label id="loginLabel">Your
					password: </label> <input type="password" id="textInput" name="password" /><br>
				<label id="loginLabel">Your first name: </label> <input type="text"
					id="textInput" name="firstname" /><br> <label id="loginLabel">Your
					last name: </label> <input type="text" id="textInput" name="lastname" /><br>
				<label id="loginLabel">Your email: </label> <input type="text"
					id="textInput" name="email" /> <label id="loginLabel">Your
					birth date: </label> <input type="text" id="datepicker" name="birthdate"
					readonly> <label id="loginLabel"></label> <input
					type="submit" id="submitInput" name="submit" value="Register">

			</form>
		</div>
	</div>

</body>
</html>